<!-- MyFansPage.vue -->
<template>
  <!-- 动态标题：我的粉丝（自己）/ TA的粉丝（他人） -->
  <UserRelationList :title="title" :backPath="backPath" :userList="fansList" :pageNum="pageNum"
    @handleItem="handleFanFollow" />
</template>

<script setup>
import { ref, onMounted, watch, defineProps } from 'vue';
import { getCurrentInstance } from 'vue';
import UserRelationList from '@/components/common/UserRelationList.vue';
import { getFansAPI } from "@/api/user/user"; // 粉丝列表API
import { useUserStore } from "@/store/modules/user/user";
import { triggerFollowAPI } from "@/api/message/message"; // 关注操作API

// 1. 定义props，接收外部传入的目标用户ID（要查看谁的粉丝）
const props = defineProps({
  // 目标用户ID（外部传入，例如查看他人粉丝时传递）
  targetUserId: {
    type: [String, Number],
    default: null // 默认为null，使用当前登录用户ID
  },
  // 可选：自定义返回路径（默认返回个人主页）
  backPath: {
    type: String,
    default: '/user'
  }
});

const { proxy } = getCurrentInstance();
const userStore = useUserStore();
// 当前登录用户ID（用于发起关注操作）
const currentLoginUserId = userStore.userInfo.userId;

// 2. 确定最终要查询的用户ID（优先用props传入的，否则用当前登录用户）
const targetUserId = ref(props.targetUserId || currentLoginUserId);
// 粉丝列表数据
const fansList = ref([]);
// 分页参数
const pageNum = ref(1);
// 动态标题
const title = ref('');

// 3. 初始化标题（根据目标用户是否为自己）
const initTitle = () => {
  title.value = targetUserId.value === currentLoginUserId ? '我的粉丝' : 'TA的粉丝';
};

// 4. 获取粉丝列表数据（根据targetUserId查询）
async function getFansList() {
  if (!targetUserId.value) return; // 确保用户ID存在
  const res = await getFansAPI(targetUserId.value, pageNum.value);
  if (res.code === 200) {
    fansList.value = res.data.map(item => ({
      ...item,
      bothStatus: item.bothStatus === 0 ? 2 : item.bothStatus // 状态转换保持不变
    }));
  }
}

// 5. 处理粉丝的关注/取消关注
async function handleFanFollow({ item, newStatus }) {
  try {
    // 注意：发起关注的是当前登录用户（currentLoginUserId），被关注的是粉丝ID（item.userId）
    const res = await triggerFollowAPI(currentLoginUserId, item.userId);
    if (res.code === 200) {
      // 更新本地粉丝列表的关注状态
      const index = fansList.value.findIndex(i => i.userId === item.userId);
      if (index > -1) {
        fansList.value[index].bothStatus = newStatus === 3 ? 2 : 1;
      }
      proxy.$toast({ message: res.data });
    }
  } catch (error) {
    console.error('关注操作失败：', error);
    proxy.$toast({ message: '操作失败', type: 'error' });
  }
}

// 6. 监听props中的targetUserId变化（外部传入的ID更新时）
watch(() => props.targetUserId, (newId) => {
  if (newId) {
    targetUserId.value = newId; // 更新目标用户ID
    pageNum.value = 1; // 重置分页
    initTitle(); // 重新初始化标题
    getFansList(); // 重新加载粉丝列表
  }
});

// 7. 页面初始化
onMounted(() => {
  initTitle();
  getFansList();
});
</script>